<template>
  <div>
    <el-form :inline="true" :model="formInline" ref="formRef" :rules="rules">
      <el-form-item label="优惠券类型：" prop="res">
        <el-radio-group v-model="formInline.res" :change="change()">
          <el-radio label="1">满减</el-radio>
          <el-radio label="2">折扣</el-radio>
        </el-radio-group> </el-form-item
      ><br />
      <el-form-item label="订单金额：" prop="sunu">
        <el-radio-group v-model="formInline.sunu">
          <el-radio label="不限" :disabled="kaiguan" />
          <el-radio :disabled="flaes">
            <el-form-item label="消费满减">
              <el-input-number
                v-model="formInline.num"
                :min="1"
                controls-position="right"
                size="small"
                :disabled="flaes"
              />
            </el-form-item>
          </el-radio>
        </el-radio-group> </el-form-item
      ><br />
      <el-form-item label="折扣比例: " prop="bili">
        <el-input v-model="formInline.bili" :input="input()" /> </el-form-item
      ><br />
      <el-form-item label="优惠券名: " prop="name">
        <el-input v-model="formInline.name" /> </el-form-item
      ><br />
      <el-form-item label="发行数量: " prop="shuliang">
        <el-input v-model="formInline.shuliang" /> </el-form-item
      ><br />
      <el-form-item label="用户类型：" prop="type">
        <el-radio-group v-model="formInline.type">
          <el-radio label="所有人" />
          <el-radio label="新用户" />
          <el-radio label="老用户" />
        </el-radio-group>
      </el-form-item>
      <div class="block">
        <span class="demonstration">优惠券使用时间：</span>
        <el-date-picker
          v-model="time"
          type="daterange"
          unlink-panels
          range-separator="To"
          end-placeholder="结束时间"
          start-placeholder="开始时间"
          :shortcuts="shortcuts"
          format="YYYY/MM/DD"
          value-format="x"
        />
      </div>
      <el-form-item>
        <el-button
          type="primary"
          style="width: 400px; margin-top: 30px"
          @click="add()"
          :loading="juhua"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { discountAdd } from "@/Api/YGM/api";

// 时间
const time = ref("");

const kaiguan = ref(false);

const flaes = ref(false);

const juhua = ref(false);

const formInline = reactive({
  // 优惠券类型
  res: "",
  // 订单金额
  sunu: "",
  // 消费满减
  num: null,
  // 折扣比例
  bili: 0,
  // 优惠券名
  name: "",
  // 发行数量
  shuliang: null,
  // 用户类型
  type: "",
});

formInline.num = null ? "****" : formInline.num;

function add() {
  juhua.value = true;
  discountAdd(
    formInline.name,
    formInline.res,
    formInline.bili,
    formInline.num == null ? "****" : formInline.num,
    Number(formInline.shuliang),
    Number(formInline.shuliang),
    Number(formInline.shuliang),
    formInline.type,
    "1",
    String(time.value[0]),
    String(time.value[1]),
    "1"
  )
    .then((res) => {
      console.log(res, "新增-----");
    })
    .finally(() => {
      juhua.value = false;
    })
    .catch((err) => {
      console.log(err);
    });
}

function change() {
  if (formInline.res == "2") {
    flaes.value = true;
    kaiguan.value = false;
    formInline.num = null;
  } else if (formInline.res == "1") {
    flaes.value = false;
    kaiguan.value = false;
  }
}

function input() {
  if (formInline.num !== null) {
    formInline.name = "满" + formInline.num + "减" + formInline.bili;
  } else {
    formInline.name = formInline.bili * 0.01 + "折";
  }
}

const rules = reactive({
  res: [
    {
      required: true,
      message: "请选择类型",
      trigger: "blur",
    },
  ],
  sunu: [
    {
      required: true,
      message: "请选择金额",
      trigger: "blur",
    },
  ],
  num: [
    {
      required: true,
      message: "请选择满减",
      trigger: "blur",
    },
  ],
  bili: [
    {
      required: true,
      message: "请选择折扣比例",
      trigger: "blur",
    },
  ],
  name: [
    {
      required: true,
      message: "优惠券名称",
      trigger: "blur",
    },
  ],
  shuliang: [
    {
      required: true,
      message: "发行数量",
      trigger: "blur",
    },
  ],
  type: [
    {
      required: true,
      message: "用户类型",
      trigger: "blur",
    },
  ],
});

const shortcuts = [
  {
    text: "近一周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
      return [end, start];
    },
  },
  {
    text: "近一个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
      return [end, start];
    },
  },
  {
    text: "近三个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() + 3600 * 1000 * 24 * 90);
      return [end, start];
    },
  },
];
const formRef = ref(null);
</script>

<style scoped>
.demonstration {
  font-size: 13px;
  color: rgb(133, 134, 137);
}
</style>
